<template>
	<view class="miner-detail">
		<view class="header">
			<view class="title">
				<view class="icon-text text-highlight">{{miner.title}}</view>
			</view>
		</view>
		<view class="miner-icon">
			<image mode="widthFix" src="../../static/icon/pool_dig_img.png"></image>
		</view>
		<view class="miner-info bg-box">
			<view class="row">
				<view class="label text-dark">单台金额</view>
				<view class="value text-highlight">
					{{miner.price}}USDT<block v-if="miner.price_sid>0">+{{miner.price_sid}}SID</block>
				</view>
			</view>
			<view class="row">
				<view class="label text-dark">每日产量</view>
				<view class="value text-highlight">
					{{miner.day_amount}}SID
				</view>
			</view>
			<view class="row">
				<view class="label text-dark">合约周期</view>
				<view class="value text-highlight">
					{{miner.release_day}}天
				</view>
			</view>
			<view class="row">
				<view class="label text-dark">每人限购</view>
				<view class="value text-highlight">
					{{miner.limit_amount}}台
				</view>
			</view>
			<view class="row">
				<view class="label text-dark">剩余数量</view>
				<view class="value text-highlight">
					{{miner.left_amount}}台
				</view>
			</view>
		</view>
		<view class="miner-detail miner-detail-margin">
			<view class="miner-title text-highlight">产品特色</view>
			<view class="introduce">
				<view class="item">
					<view class="item-info">
						<view class="item-title">挖矿机制</view>
						<view class="item-content">{{miner.about_1}}</view>
					</view>

				</view>
				<view class="item">
					<view class="item-info">
						<view class="item-title">发行总量</view>
						<view class="item-content">{{miner.about_2}}</view>
					</view>
				</view>
			</view>
			<view class="about bg-box">
				<view class="about-title">说明：</view>
				<view class="about-item text-dark">
					{{miner.about_3}}
				</view>
			</view>
		</view>
		<view class="button-box-padding">
			<button class="btn-primary btn-block" @click="confirmBuyMiner">立即下单</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				miner: null,
			}
		},
		onLoad(e) {
			this.miner = JSON.parse(e.data)
			console.log("miner:", JSON.stringify(this.miner))
			uni.setNavigationBarTitle({
				title: this.miner.name
			})
		},
		methods: {
			confirmBuyMiner() {
				uni.navigateTo({
					url: "confirm-buy-miner?data=" + JSON.stringify(this.miner)
				})
			}
		}
	}
</script>

<style lang="scss">
	view {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
	}

	page {
		background-image: url(../../static/background/pool_bg.png);
	}

	.miner-detail-margin {
		margin-bottom: 60px !important;
	}

	.miner-detail {


		.header {

			.title {
				flex-direction: row;
				padding: 15px;

				.icon {
					width: 20px;
					height: 20px;
					margin-right: 5px;
					justify-content: center;

					image {
						width: 100%;
					}
				}

				.icon-text {
					font-weight: bold;
					font-size: 18px;
					line-height: 100%;
					justify-content: center;
				}
			}
		}

		.miner-icon {
			image {
				width: 300upx;
				margin: 0 auto;
			}

		}

		.miner-info {
			margin: 0 15px;
			border-radius: 12px;
			box-shadow: 0 0 15px rgba(0, 0, 0, .1);
			padding: 15px;

			.row {
				flex-direction: row;
				justify-content: space-between;
				margin-bottom: 5px;

				.label {}

				.value {
					font-weight: bold;
				}
			}
		}

		.miner-detail {
			margin: 15px;
			border-radius: 12px;
			box-shadow: 0 0 15px rgba(0, 0, 0, .1);
			padding: 15px;

			.miner-title {
				text-align: center;
				font-weight: bold;
				font-size: 18px;
			}

			.about {
				padding: 10px;
				border-radius: 6px;

				.about-title {
					font-weight: bold;
				}

				.about-item {
					line-height: 120%;
					font-size: 14px;
				}
			}

			.introduce {
				flex-direction: row;
				flex-wrap: wrap;
				padding-top: 10px;
				margin-bottom: 15px;

				.item {
					width: 100%;
					flex-direction: row;
					padding-bottom: 10px;

					view {
						justify-content: center;
						text-align: left;
					}

					.item-title {
						font-weight: bold;
						padding-top: 10px;
					}

					.item-content {
						color: #999999;
						line-height: 120%;
					}

				}
			}
		}
	}

	.button-box-padding {
		position: fixed;
		bottom: 0;
		width: 100%;
	}
</style>
